<style>
    .number-buzzer-invited{
        margin-top: 10px;
    }

    #tab-buzzer .table{
        margin-top: 10px;
    }

    #tab-campaign .campaign-method .span-method-live{
        float: right;
        padding-right: 20px;
        height: 100%;
        line-height: 40px;
    }

    #tab-campaign .campaign-method .span-method-test{
        float: right;
        height: 100%;
        line-height: 40px;
    }

    .form-control .col-center{
        display: inline-block;
        width: 100%;
        padding: 5px;
    }

    .form-control .col-center .col-center-title{
        display: inline-block;
        vertical-align: top;
        width: 20%;
    }

    .col-management-body .form-control .label{
        width: 20%;
        min-width: 160px;
    }

    .col-management-body .form-control .label .fa-info-circle{
        color: #ccc;
    }

    .form-control .col-center .col-center-child{
        display: inline-block;
    }

    .col-criteria{
        padding-top: 20px;
        min-height: 500px;
        width: 80%!important;
    }

    .col-criteria .col-criteria-items{
        float: left;
        display: inline-block;
        width: 75%;
        min-width: 450px;
        border-right: 1px solid #eee;
    }

    .col-criteria .col-criteria-result{
        float: left;
        display: inline-block;
        width: 25%;
        padding: 10px;
        padding-left: 30px;
    }

    .result-show{
        border-bottom: 1px solid #ddd;
    }

    .col-center-child .col-center-child-item{
        display: inline-block;
        padding-right: 20px;
    }

    .col-center-child .col-center-child-item-1{
        display: block;
    }

    #tab-campaign .save-campaign{
        background: #e67e22;
        float: right;
    }

    #tab-campaign .col-image-item{
        height: 100px;
    }

    #tab-campaign .col-image-item ul{
        width: 100%;
        height: 100%;
        list-style: none;
    }

    #tab-campaign .col-image-item ul li{
        position: relative;
        display: inline-block;
        float: left;
        margin-right: 5px;
        cursor: pointer;
    }

    #tab-campaign .col-image-item ul li:hover{
        opacity: 0.7;
    }

    #tab-campaign .col-image-item img{
        width: 100px;
        height: 90px;
        border: 1px solid #ddd;
        border-radius: 3px;
    }

</style>

<link href="<?php echo ROOT_URL; ?>public/upload/upload.css" rel="stylesheet">
<script src="<?php echo ROOT_URL; ?>public/upload/jquery.upload.management.js"></script>

<!--DateRangePicker-->
<script type="text/javascript" src="<?php echo ROOT_URL; ?>public/daterangepicker/moment.min.js"></script>
<script type="text/javascript" src="<?php echo ROOT_URL; ?>public/daterangepicker/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo ROOT_URL; ?>public/daterangepicker/daterangepicker-bs3.css" />

<link href="<?php echo ROOT_URL; ?>public/css/criteria.css" rel="stylesheet">

<script>
    $(function(){
        //DateRangerPicker
        var date = $('#duration');
        date.daterangepicker({
            format: 'MMM D, YYYY',
            startDate: moment(),
            endDate: moment()
        }, function(start, end) {
            $('#begin').val(start.format('DD-MM-YYYY'));
            $('#end').val(end.format('DD-MM-YYYY'));
        });
        date.data('daterangepicker').updateInputText();
        date.data('daterangepicker').notify();
    });
</script>

<div class="col-management">
    <div class="col-management-header">
        <h3>Create New Campaign</h3>
        <div tab-data="buzzer" class="tab-campaign-management tab-buzzer">Buzzer Management</div>
        <div tab-data="campaign" class="tab-campaign-management tab-campaign active">Campaign Management</div>
    </div>
    <div class="col-management-body">
        <div id="tab-campaign">
            <div class="form-control">
                <div class="form-group campaign-method">
                    <div class="span-method-test">
                        <input id="campaign_type_test" name="type" type="radio" value="2">
                        <label for="campaign_type_test">Test</label>
                    </div>
                    <div class="span-method-live">
                        <input id="campaign_type_live" name="type" type="radio" checked value="1">
                        <label for="campaign_type_live">Live</label>
                    </div>
                </div>

                <div class="form-group">
                    <div class="label">
                        <label>Campaign name</label>
                        <span><i class="fa fa-info-circle"></i></span>
                    </div>
                    <div class="col-reg">
                        <input id="campaign_name" class="input" type="text">
                    </div>
                </div>

                <div class="form-group">
                    <div class="label">
                        <label>Short description</label>
                        <span><i class="fa fa-info-circle"></i></span>
                    </div>
                    <div class="col-reg">
                        <input id="short_description" class="input" type="text">
                    </div>
                </div>

                <div class="form-group">
                    <div class="label">
                        <label>Long description</label>
                        <span><i class="fa fa-info-circle"></i></span>
                    </div>
                    <div class="col-reg">
                        <textarea id="long_description" class="textarea"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="label">
                        <label>Campaign time</label>
                        <span><i class="fa fa-info-circle"></i></span>
                    </div>
                    <div class="col-reg">
                        <input type="hidden" id="begin" name="begin">
                        <input type="hidden" id="end" name="end">
                        <input id="duration" class="duration input" type="text">
                    </div>
                </div>

                <div class="form-group">
                    <div class="label">
                        <label>Campaign image</label>
                        <span class="col-icon-info"><i class="fa fa-info-circle"></i></span>
                    </div>
                    <div class="col-reg">
                        <div id="file-upload">
                            <div class="file-upload">
                                <i class="fa fa-cloud-upload"></i>
                                <label class="file-upload-u">Upload...</label>
                                <label class="file-upload-choose">Choose</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="thumbnail_image" class="form-group" hidden="hidden">
                    <div class="label">
                        <label>Thumbnail image</label>
                        <span><i class="fa fa-info-circle"></i></span>
                    </div>
                    <div class="col-reg" style="padding-top: 15px">
                        <div class="col-image-item">
                            <ul id="tab-campaign-upload">
                                <!--<li>
                                    <img src="upload/images/c1.png">
                                    <input class="campaign_img" type="hidden" value="c1.png" name="image">
                                    <span class="remove-upload-m"><i class="fa fa-times"></i></span>
                                </li>-->
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="label">Campaign criteria</label>
                    <!--More criteria --->
                    <div class="col-reg col-criteria">
                        <div class="col-criteria-items">
                            <div class="col-center">
                                <label class="col-center-title">Gender</label>
                                <div class="col-center-child">
                                    <div class="col-criteria-radio selected">
                                        <input id="criteria-age-all" name="age" value="0" type="radio">
                                        <label for="criteria-age-all">Tất cả</label>
                                    </div>
                                    <div class="col-criteria-radio">
                                        <input id="criteria-age-male" name="age" value="1" type="radio">
                                        <label for="criteria-age-male">Nam</label>
                                    </div>
                                    <div class="col-criteria-radio">
                                        <input id="criteria-age-female" name="age" value="2" type="radio">
                                        <label for="criteria-age-female">Nữ</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-center">
                                <label class="col-center-title">Age</label>
                                <div class="col-center-child">
                                    <div class="col-select-age">
                                        <div class="criteria-select">
                                            <span class="text">13</span>
                                            <span class="icon"><i class="fa fa-caret-down"></i></span>
                                        </div>
                                        <div class="criteria-popup begin-age" type="begin" style="display: none">
                                            <ul>
                                                <?php
                                                    for($i = 13; $i <= 65; $i++){
                                                        if($i == 13){
                                                            echo '<li class="selected" value="'.$i.'">'.$i.'</li>';
                                                        }else{
                                                            echo '<li value="'.$i.'">'.$i.'</li>';
                                                        }
                                                    }
                                                ?>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-select-age">-</div>
                                    <div class="col-select-age">
                                        <div class="criteria-select">
                                            <span class="text">65</span>
                                            <span class="icon"><i class="fa fa-caret-down"></i></span>
                                        </div>
                                        <div class="criteria-popup end-age" type="end" style="display: none">
                                            <ul>
                                                <?php
                                                    for($j = 13; $j <= 65; $j++){
                                                        if($j == 65){
                                                            echo '<li class="selected" value="'.$j.'">'.$j.'</li>';
                                                        }else{
                                                            echo '<li value="'.$j.'">'.$j.'</li>';
                                                        }
                                                    }
                                                ?>
                                            </ul>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="col-center">
                                <label class="col-center-title">Location</label>
                                <div class="col-center-child">
                                    <div class="criteria-location">
                                        <div class="result">
                                            <p>Location</p>
                                            <ul>
                                                <li class="location-0">
                                                    <span class="text">Tất cả</span>
                                                    <span class="icon"><i class="fa fa-times"></i></span>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="search">
                                            <input type="text" placeholder="Search location">
                                        </div>
                                        <div class="list">
                                            <ul>
                                                <li value="0" class="all selected">Tất cả</li>
                                                <?php
                                                    foreach($province as $value){
                                                        echo '<li class="selected" value="'.$value['pid'].'">'.$value['province'].'</li>';
                                                    }
                                                ?>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!--<div class="col-center">
                                <label class="col-center-title">Household Size</label>
                                <div class="col-center-child">
                                    <div class="col-center-child-item">
                                        <input id="criteria_single" type="checkbox">
                                        <label for="criteria_single">Độc thân</label>
                                    </div>
                                    <div class="col-center-child-item">
                                        <input id="criteria_married" type="checkbox">
                                        <label for="criteria_married">Vợ chồng</label>
                                    </div>
                                    <div class="col-center-child-item">
                                        <input id="criteria_1_child" type="checkbox">
                                        <label for="criteria_1_child">1 con</label>
                                    </div>
                                    <div class="col-center-child-item">
                                        <input id="criteria_2_child" type="checkbox">
                                        <label for="criteria_2_child">2 con</label>
                                    </div>
                                </div>
                            </div>-->

                            <div class="col-center">
                                <label class="col-center-title">More criteria</label>
                                <div class="col-center-child">
                                    <div class="col-more-criteria">
                                        <div class="criteria-select">
                                            <span class="text">Các tiêu chí</span>
                                            <span class="icon"><i class="fa fa-caret-down"></i></span>
                                        </div>
                                        <div class="criteria-popup" style="display: none">
                                            <ul>
                                                <?php
                                                    foreach($attributes as $value){
                                                        echo '<li id="criteria_'.$value['atid'].'" atid="'.$value['atid'].'">'.$value['attr_name'].'</li>';
                                                    }
                                                ?>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--<div class="criteria-main">
                                        <div class="criteria-main-header">
                                            <div class="criteria-main-text"><input type="text" placeholder="Search criteria"></div>
                                            <div class="criteria-main-browse">Browse</div>
                                        </div>
                                        <div class="criteria-main-body">
                                            <ul>
                                                <li>Thông tin cá nhân <i class="fa fa-plus"></i></li>
                                                <li>Làm đẹp <i class="fa fa-plus"></i></li>
                                            </ul>
                                        </div>
                                    </div>-->

                                    <!-- criteria added-->
                                    <!--<div class="criteria-item">
                                        <div>Thông tin cá nhân</div>
                                        <div>Độ dày tóc</div>
                                        <div>Độ dày tóc của bạn</div>
                                        <div>Mỏng</div>
                                    </div>-->
                                </div>
                            </div>

                            <div id="campaign-criteria">

                                <!--<div class="col-center criteria-col-item">
                                    <label class="col-center-title">Triệu chứng</label>
                                    <div class="col-center-child">
                                        <div class="col-search-criteria">
                                            <div class="col-search-criteria-selected">
                                                <ul>
                                                    <li>
                                                        <p class="parent">
                                                            <span class="text">Triệu chứng</span>
                                                            <span class="icon"><i class="fa fa-times"></i></span>
                                                        </p>
                                                        <p class="children">
                                                            <span class="text">Đau lưng</span>
                                                            <span class="icon"><i class="fa fa-times"></i></span>
                                                        </p>
                                                    </li>
                                                    <li>
                                                        <p class="parent">
                                                            <span class="text">Triệu chứng</span>
                                                            <span class="icon"><i class="fa fa-times"></i></span>
                                                        </p>
                                                        <p class="children">
                                                            <span class="text">Đau lưng</span>
                                                            <span class="icon"><i class="fa fa-times"></i></span>
                                                        </p>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="col-search-criteria-header">
                                                <span>Search criteria</span>
                                            </div>
                                            <div class="col-search-criteria-body">
                                                <ul>
                                                    <li>
                                                        <div class="col-search-criteria-parent">
                                                            <span class="icon"><i class="fa fa-caret-right"></i></span>
                                                            <span class="text">Đau lưng</span>
                                                        </div>
                                                        <ul class="col-search-criteria-child">
                                                            <li>
                                                                <div class="col-search-criteria-parent">
                                                                    <span class="icon"><i class="fa fa-caret-right"></i></span>
                                                                    <span class="text">Đau lưng</span>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <div class="col-search-criteria-parent">
                                                            <span class="icon"><i class="fa fa-caret-right"></i></span>
                                                            <span class="text">Đau chân</span>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="col-search-criteria-parent">
                                                            <span class="icon"><i class="fa fa-caret-right"></i></span>
                                                            <span class="text">Đau đầu gối</span>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>-->
                            </div>
                        </div>
                        <div class="col-criteria-result">
                            <div id="total_criteria">
                                <!---Gender-->
                                <input class="gender" type="hidden" name="gender" value="0">
                                <!--Age-->
                                <input class="begin_age" type="hidden" name="begin_age" value="13">

                                <input class="end_age" type="hidden" name="end_age" value="65">
                                <!--Location-->
                                <input class="location" type="hidden" name="location[]" value="0">
                                <!--More criteria-->
                                <input class="profile" type="hidden" name="profile[]">
                                <input class="beautiful" type="hidden" name="beautiful[]">
                                <input class="family" type="hidden" name="family[]">
                                <input class="sport" type="hidden" name="sport[]">
                                <input class="works" type="hidden" name="works[]">
                                <input class="sales" type="hidden" name="sales[]">
                                <input class="technology" type="hidden" name="technology[]">
                                <input class="eatanddrink" type="hidden" name="eatanddrink[]">
                                <input class="hobby" type="hidden" name="hobby[]">
                            </div>
                            <ul class="result-show">
                                <li class="gender">
                                    Gender:
                                    <ul>
                                        <li>Tất cả</li>
                                    </ul>
                                </li>
                                <li class="location">
                                    Location:
                                    <ul>
                                        <li value="0">Tất cả</li>
                                    </ul>
                                </li>
                                <li class="age">
                                    Age:
                                    <ul>
                                        <li>13-65</li>
                                    </ul>
                                </li>
                                <li class="profile">
                                    Thông tin cá nhân:
                                    <ul>
                                        <li>Kết hôn hoặc độc thân</li>
                                    </ul>
                                </li>
                                <li class="beautiful">
                                    Làm đẹp:
                                    <ul></ul>
                                </li>
                                <li class="family">
                                    Hộ gia đình:
                                    <ul></ul>
                                </li>
                                <li class="sport">
                                    Sức khỏe và thể thao:
                                    <ul></ul>
                                </li>
                                <li class="works">
                                    Công việc:
                                    <ul></ul>
                                </li>
                                <li class="sales">
                                    Mua sắm:
                                    <ul></ul>
                                </li>

                                <li class="technology">
                                    Công nghệ:
                                    <ul></ul>
                                </li>
                                <li class="eatanddrink">
                                    Thức ăn và đồ uống:
                                    <ul></ul>
                                </li>
                                <li class="hobby">
                                    Sở thích:
                                    <ul></ul>
                                </li>

                            </ul>
                            <p class="research">Total:
                                <span class="people">0</span>
                                <span class="loading"></span>
                            </p>
                        </div>
                    </div>


                </div>

                <div class="form-group" style="margin-top: 50px">
                    <input id="save_campaign" class="btn save-campaign" type="button" value="Save Campaign">
                </div>

            </div>
        </div>

        <div id="tab-buzzer" style="display: none">
            <p class="number-buzzer-invited">Have 0 buzzer </p>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Buzzier</th>
                        <th>Buzz score</th>
                        <th>Option</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td>
                            <input type="checkbox">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>

<script>
    $(function(){
        var body = $('body');

    });


    $(document).ready(function () {
        var settings = {
            url: "<?php echo ROOT_URL; ?>management/uploadImage",
            method: "POST",
            type: "json",
            allowedTypes:"jpg,png,gif",
            fileName: "myfile",
            multiple: true,
            showPreview: true,
            previewWidth: 80,
            previewHeight: 80,
            onSuccess:function(files,data,xhr)
            {
                $('#thumbnail_image').show();
                var tab_campaign_upload = $('#tab-campaign-upload');
                var size = tab_campaign_upload.find('li').size();
                var mid = data;
                var html = '';
                html += '<input class="campaign_img" type="hidden" value='+mid+' name="image">';
                html += '<span class="remove-upload-m" mid='+mid+'><i class="fa fa-times"></i></span>';
                $(tab_campaign_upload.find('li').get(size-1)).append(html);

                tab_campaign_upload.find('.progress-bar-upload').hide();
            },
            onError: function(files,status,errMsg)
            {
            }
        };
        var uploadObj = $("#file-upload").uploadFile(settings);

    });

</script>